<template>
  <div class="workStage_status">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.workstageStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'WorkStageStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据工序状态返回相应class
    stateColor() {
      switch (this.data.workstageStatusValue) {
        case 'Normal':
          return 'workstage_status_normal'
        case 'InProblem':
          return 'workstage_status_inProblem'
        case 'Paused':
          return 'workstage_status_paused'
        case 'Terminated':
          return 'workstageStatusTerminated'
      }
    }
  }
}
</script>

<style lang="less">
  // 正常
  @workstageStatusNormal: #00a949;
  // 暂停
  @workstageStatusPaused: #ff931f;
  // 问题处理
  @workstageStatusInProblem: #00b4ff;
  // 已终止
  @workstageStatusTerminated: #7e8e9f;
  .workStage_status{
    .block_label_color{
      /*工序状态*/
      &.workstage_status_normal{
        background-color: @workstageStatusNormal
      }
      &.workstage_status_paused{
        background-color: @workstageStatusPaused
      }
      &.workstage_status_inProblem{
        background-color: @workstageStatusInProblem
      }
      &.workstage_status_terminated{
        background-color: @workstageStatusTerminated
      }
    }
  }
</style>
